<template>
  <div class="businessManger">
    <div class="businessManger-top">
      <p>司机管理</p>
      <span
        :class="titleChoose == i ? 'choosed' : ''"
        @click="changeChoose(i)"
        v-for="(ele, i) in titleState"
        :key="i"
        >{{ ele }}</span
      >
    </div>
    <div class="businessManger-filter">
      <el-button round>新建业务</el-button>
      <div
        class="businessManger-filter-choose-month"
        :class="chooseMonth == i ? 'choosed' : ''"
        @click="chooseMonth = i"
        v-for="(ele, i) in monthList"
        :key="i"
      >
        {{ ele }}
      </div>
      <el-date-picker
        v-model="date"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      ></el-date-picker>

      <el-input :placeholder="'关键字搜索搜索'">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <el-button round>搜索</el-button>
    </div>
    <div class="businessManger-table">
      <CostomTable
        operatWidth="200"
        :nameData="nameData"
        :tableData="tableData"
        :operating="operating"
        :pagination="pagination"
        :currentChange="currentChange"
      />
    </div>
  </div>
</template>

<script>
import CostomTable from "@/components/costomTable.vue";
export default {
  data() {
    return {
      date: "",
      titleState: ["全部", "进行中", "已完成"],
      titleChoose: 0,
      monthList: ["本月", "上月", "最近三个月"],
      chooseMonth: 0,
      nameData: [
        { label: "业务信息", property: "busnessManger" },
        { label: "行程数", property: "stroke" },
        { label: "车辆数", property: "carNum" },
        { label: "设备数", property: "deviceNum" },
        { label: "业务状态", property: "state" },
      ],
      tableData: [
        // {
        //   busnessManger: "asdsad",
        //   stroke: 100,
        //   carNum: 50,
        //   deviceNum: 20,
        //   state: true,
        // },
      ],
      operating: [{ name: "查看详情",fun:(index)=>{
        console.log('asd');
        this.$router.push('/main/second')
      } }, { name: "编辑" }, { name: "删除",fun:this.delete }],
      pageNum: 1,
      pagination:1
    };
  },
  methods: {
    changeChoose(i) {
      this.titleChoose = i;
    },
    getData() {

      this.axios("get", this.inter.getBusinessPage, {
        pageNum: this.pageNum,
        pageSize: 10,
      }).then((res) => {
        this.tableData = [];
        this.pagination = res['total']
        res.list.filter((item)=>{
          this.tableData.push({
            id:item['id'],
            carNum:item['carNum'],
            busnessManger:item['name'],
            state:item['openStatus'],
            stroke:item['transport'],
            deviceNum:item['deviceNum']
          });
        })
      });
    },
    delete(index){
      // console.log(this.tableData[index]);
      let id = this.tableData[index].id
       this.$confirm("此操作将该记录, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }).then(()=>{
              this.axios('delete',this.inter.postBusinessDelete + id).then(res=>{
                this.$message({
                    type: "success",
                    message: "删除成功!",
                    offset: 300,
                  });
                  this.getData();
              });
            })
     
    },
    currentChange(page){
      this.pageNum = page
      this.getData()
    }
  },
  components: {
    CostomTable,
  },
  mounted() {
    this.getData()
  },
};
</script>

<style lang='scss' scoped>
.businessManger {
  &-table {
    height: 70vh;
    overflow-y: scroll;
    margin: 0.1rem;
    background: #fff;
  }
  &-filter {
    .el-date-editor {
      margin-left: 0.2rem;
    }
    .el-input {
      width: 1.5rem;
      margin-left: auto;
      margin-right: 0.2rem;
    }
    .choosed {
      background: #006ab4;
      color: #fff;
    }
    .el-button {
      background: #006ab4;
      color: #fff;
    }
    &-choose-month {
      &:nth-child(2) {
        margin-left: 0.3rem;
      }
      &:nth-child(4) {
        border-right: solid #999 0.01rem;
      }
      border: solid #999 0.01rem;
      border-right: none;
      color: #999999;
      font-size: 0.1rem;
      padding: 0.1rem 0.2rem;
    }
    background: #fff;
    padding: 0.2rem;
    display: flex;
    align-items: center;
    margin: 0.1rem;
  }
  &-top {
    .choosed {
      color: #006ab4;
    }
    p {
      font-weight: bold;
    }
    span {
      margin-left: 0.4rem;
      color: #999;
      cursor: pointer;
    }
    padding: 0.2rem;
    display: flex;
    background: #fff;
    margin: 0.1rem;
  }
}
</style>

<style lang="scss">
.businessManger {
  .el-date-editor {
    width: 2.5rem;
  }
}
</style>